<template>
    <view-box>
      <div v-if="position.status === 0">
        <p style="text-align: center;margin-top:100px;font-size:18px;color:#666;">等待审核</p>
      </div>
      <div style="height:100%;" v-if="position.status === 1">
      <div class="" >
        <p align="center" style="font-size:15px;height:35px;line-height:35px;">{{position.name}}<span v-if="position.sex === 1">先生</span><span v-if="position.sex === 2">女士</span>的人生分析（{{timeNow}}年时运）</p>
      </div>
      <!-- 雷达图 -->
      <div id="container" ref="selectLi" style="height: 50%"></div>
      <div class="">
        <h3 style="color:#000;margin-left:3%;">分析说明</h3>
      </div>
      <div class="">
        <div class="border-long">
          <p class="margin-rada">1,工作</p>
          <div class="progress">  
              <span class="bar"  style="background:#FF5050;" :style="{width: position.work_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.work_proposal}}</p>
        </div>
        <div class="border-long">
          <p class="margin-rada">2、能力</p>
          <div class="progress">  
              <span class="bar"  style="background:#0CA6E6;" :style="{width: position.capacity_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.capacity_proposal}}</p>
        </div>

         <div class="border-long">
          <p class="margin-rada">3、创新</p>
          <div class="progress">  
              <span class="bar"  style="background:#6C45FF;" :style="{width: position.innovate_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.innovate_proposal}}</p>
        </div>

        <div class="border-long">
          <p class="margin-rada">4、稳定</p>
          <div class="progress">  
              <span class="bar"  style="background:#3CE6C4;" :style="{width: position.stabilize_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.stabilize_proposal}}</p>
        </div>
        <div class="border-long">
          <p class="margin-rada">5、收入</p>
          <div class="progress">  
              <span class="bar"  style="background:#FFC703;" :style="{width: position.income_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.income_proposal}}</p>
        </div>
        <div class="border-long">
          <p class="margin-rada">6、婚姻</p>
          <div class="progress">  
              <span class="bar"  style="background:#FF4BF0;" :style="{width: position.marriage_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.marriage_proposal}}</p>
        </div>
          <div class="border-long">
          <p class="margin-rada">7、健康</p>
          <div class="progress">  
              <span class="bar"  style="background:#00E140;" :style="{width: position.fitness_fraction * 100 / 5 + '%'}"></span>  
          </div> 
        </div>
        <div class="">
          <p class="margin-p-text">{{position.fitness_proposal}}</p>
        </div>
      </div>

      <div style="height:1px;background:#f4f4f4;width:90%;margin-left:5%;margin-top:10px;"></div>
      <div class="">
        <h4 class="wid-h4">其他分析建议</h4>
        <p class="wid-p1">{{position.else_proposal}}</p>
      </div>
      <div style="height:1px;background:#f4f4f4;width:90%;margin-left:5%;margin-top:10px;"></div>
      <div class="">
        <p align="center" style="font-size:14px;color: #8E8E8E;padding:6px 0px;">{{position.name}}<span v-if="position.sex === 1">先生</span><span v-if="position.sex === 2">女士</span>出生于阳历{{position.gregorian_calendar}}</p>
        <p align="center" style="font-size:14px;color: #8E8E8E;padding:6px 0px;">出生地：{{position.birth_address}}</p>
      </div>
       <div class="">
        <p align="center" style="font-size:17px;color: #000;padding:6px 0px;">天南山文化</p>
        <p align="center" style="font-size:17px;color: #000;padding:6px 0px;">祝您身体健康、吉祥如意！</p>
      </div>
      </div>
    </view-box>
</template>
<script>
import { ViewBox, Box } from 'vux'
import 'echarts/lib/chart/radar'
// 引入当前图表配置需要用到的图表、组件
var echarts = require('echarts/lib/echarts')

export default {
  name: 'echarts-radar',
  components: {
    ViewBox,
    Box
  },
  data () {
    return {
      renderer: 'canvas',
      position: {},
      timeNow: ''
    }
  },
  mounted () {
    this.getMyYiJing()
    this.getdatanew()
  },
  computed: {
    // option 合并传入的数据，返回一个 echarts 的 配置项
  },
  methods: {
    getMyYiJing () {
      this.$http.get('/getMyYiJing?id=' + this.$route.query.diof).then(response => {
        this.position = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    getdatanew () {
      var date = new Date()
      var year = date.getFullYear()
      var currentdate = year
      this.timeNow = currentdate
    },
    drawLine () {
      var dom = document.getElementById('container')
      var myChart = echarts.init(dom)
      myChart.setOption({
        radar: [
          {
          },
          {
            indicator: [
              {text: '工作', max: 5, min: 1},
              {text: '能力', max: 5, min: 1},
              {text: '收入', max: 5, min: 1},
              {text: '健康', max: 5, min: 1},
              {text: '婚姻', max: 5, min: 1},
              {text: '稳定', max: 5, min: 1},
              {text: '创新', max: 5, min: 1}
            ],
            center: ['50%', '50%'],
            radius: '66%',
            startAngle: 90,
            splitNumber: 4,
            shape: 'polygon',
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#fff', '#fff', '#fff', '#fff'],
                shadowColor: '#0C0C0C',
                shadowBlur: 1
              }
            },
            axisLine: {
              lineStyle: {
                color: '#0C0C0C',
                type: 'dashed',
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '结果',
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: [this.position.work_fraction, this.position.capacity_fraction, this.position.income_fraction, this.position.fitness_fraction, this.position.marriage_fraction, this.position.stabilize_fraction, this.position.innovate_fraction],
                name: '结果',
                areaStyle: {
                  normal: {
                    opacity: 0.4,
                    color: new echarts.graphic.RadialGradient(0.5, 0.7, 1, [
                      {
                        color: '#FF0000',
                        offset: 0
                      },
                      {
                        color: '#FF0000',
                        offset: 1
                      }
                    ])
                  }
                }
              }
            ]
          }
        ]
      })
    }
  },
  watch: {
    position (value) {
      setTimeout(() => {
        this.drawLine()
      }, 200)
    }
  }
}
</script>
<style scoped>
.wid-h4{
  width: 90%;
  margin-left: 5%;
  height: 40px;
  line-height: 40px;
}
.wid-p1{
  width: 90%;
  margin-left: 5%;
  height: auto;
  color: #8E8E8E;
  font-size: 15px;
  line-height: 40px;
}
.border-long{
  width: 100%;
  display: flex;
  align-items: center;
}
.margin-rada{
  font-size: 16px;
  margin-left: 7%;
  margin-right: 6px;
}
.margin-p-text{
  font-size: 16px;
  margin-left: 7%;
  margin-right: 7%;
  color: #8E8E8E;
}
.border-long p{
  /* width: 40%; */
}
 .progress {  
      overflow: hidden;  
      height: 20px;  
      margin-bottom: 20px;  
      margin-top: 20px;  
      /* margin-left: 30px;   */
 
      background-repeat: repeat-x;  
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);  
      -webkit-border-radius: 4px;  
      -moz-border-radius: 4px;  
      border-radius: 4px;  
      width:60%;  
      /* margin-right:12px;   */
    }  

    .progress .bar {  
      width: 0%;  
      height: 100%;  
      color: #ffffff;  
      float: left;  
      font-size: 12px;  
      text-align: center;  
      align-items: center;  
      display: flex;  
      justify-content: center;  
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
      background-color: #0e90d2;  
      background-image: -moz-linear-gradient(top, #149bdf, #0480be);  
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));  
      background-image: -webkit-linear-gradient(top, #149bdf, #0480be);  
      background-image: -o-linear-gradient(top, #149bdf, #0480be);  
      background-image: linear-gradient(to bottom, #149bdf, #0480be);  
      background-repeat: repeat-x;  
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);  
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
      -webkit-box-sizing: border-box;  
      -moz-box-sizing: border-box;  
      box-sizing: border-box;  
      border-radius: 4px;
      -webkit-transition: width 0.6s ease;  
      -moz-transition: width 0.6s ease;  
      -o-transition: width 0.6s ease;  
      transition: width 0.6s ease;  
    } 
</style>

